
<template>
  <div>
    <v-card-title flat color="white">
      <v-btn color="primary" @click="addBrand()">新增</v-btn>
      <!--弹出的对话框-->
      <v-dialog persistent v-model="dialog" width="500">
        <v-card>
          <!--对话框标题-->
          <v-toolbar dense dark color="primary">
            <v-toolbar-title>{{isEdit?'修改商品':'新增商品'}}</v-toolbar-title>
          </v-toolbar>
          <!--对话框内容-->
          <v-card-text class="px-5">

            <my-brand-form @close="closeWindow()" :oldBrand="oldBrand" :isEdit="isEdit"/>
          </v-card-text>
        </v-card>
      </v-dialog>
      <!--空间隔离组件-->
      <v-spacer />
      <!--搜索框，与search属性关联-->
      <v-text-field label="输入关键字搜索" append-icon="search" v-model="search" hide-details/>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center"><img v-if="props.item.image" :src="props.item.image" width="130" height="40"/></td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="text-xs-center">
          <v-btn color="info" @click="editItem(props.item)">编辑</v-btn>
          <v-btn color="error" @click="deleteItem(props.item)">删除</v-btn>


          <v-dialog persistent v-model="delete_dialog" width="500">
            <v-card>
              <!--对话框标题-->
              <v-toolbar dense dark color="error">
                <v-toolbar-title>删除确认:您确定删除该商品吗?</v-toolbar-title>
              </v-toolbar>
              <!--对话框内容-->
              <v-card-text class="px-5">
                <my-brand-delete :oldBrand="oldBrand" @closedelete="closeDelete()"  />
              </v-card-text>
            </v-card>
          </v-dialog>
        </td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
  import MyBrandForm from "./MyBrandForm"
  import MyBrandDelete from "./MyBrandDelete"
    export default {
      name: "myBrand",
      data() {
        return {
          search: '', //搜索品牌
          totalBrands: 0, // 总条数
          brands: [], // 当前页品牌数据
          loading: true, // 是否在加载中
          pagination: {}, // 分页信息
          headers: [ // 头信息
            {text: 'id', align: 'center', value: 'id'},
            {text: '名称', align: 'center', value: 'name', sortable: false},
            {text: 'LOGO', align: 'center', value: 'image', sortable: false},
            {text: '首字母', align: 'center', value: 'letter'},
            {text: '操作', align: 'center', value: 'id', sortable: false},
          ],
          dialog:false, //是否现实对话框
          oldBrand:{}, //修改前的Brand信息
          isEdit : false,
          delete_dialog:false, //默认不打开删除提示对话框
        }
      },
      components:{
          MyBrandForm,
          MyBrandDelete
      },
      watch: {
        pagination: {
          deep: true, // 深度监视
          handler() {
            this.getDataFromServer();
          }
        },
        search() {
          this.pagination.page = 1;
          this.getDataFromServer();
        }
      },
      methods: {
        getDataFromServer() { // 从服务端加载数据的函数
          // 伪造演示数据
          this.$http.get("/item/brand/page", {
            params: {
              page: this.pagination.page, //当前页
              rows: this.pagination.rowsPerPage, //每页大小
              sortBy: this.pagination.sortBy, //排序规则
              desc: this.pagination.descending, //是否降序
              key: this.search //关键词查询
            }
          }).then(resp => {//获取响应数据aaaaaa
            this.totalBrands = resp.data.total; //总条数
            this.brands = resp.data.items;
            this.loading = false; //加载完成
          });
        },
        addBrand(){
          this.isEdit = false;
          this.dialog = true;
        },
        closeDelete(){
          this.getDataFromServer();
          this.delete_dialog = false;
        },
        closeWindow(){
          // 重新加载数据
          this.getDataFromServer();
          // 关闭窗口
          this.dialog = false;
        },
        editItem(oldBrand){
          this.$http.get("/item/category/bid/"+oldBrand.id).then(({data})=>{
            this.isEdit = true;
            this.dialog = true;
            this.oldBrand = oldBrand;
            this.oldBrand.categories = data;
          })
        },
        deleteItem(oldBrand){
          this.$http.get("/item/category/bid/"+oldBrand.id).then(({data}) => {
            this.delete_dialog = true;
            this.oldBrand = oldBrand;
            this.oldBrand.categories = data;
          })
        }
      },
          // 渲染后执行
      mounted()
          {
            this.getDataFromServer() // 调用数据初始化函数
          },

    }


</script>

<style scoped>

</style>
